<template>
    <l-page customClass="flex flex-col h-full">
        <l-navbar title="申请单详情" bgColor="#3c9cff" color="white"></l-navbar>
        <view class="flex-1 overflow-auto">
            <view class="panel text-lg">
                <view :class="`text-lg text-center ${detail.apply_status}`">{{ detail.apply_status_text }}</view>
            </view>
			
            <view class="panel data !rounded-lg">
				<view class="!mb-3 text-blue-300 font-bold">基本信息</view>
                <view class="flex items-center justify-between">
                    <view class="w-24 text-gray-400">贷款名称</view>
                    <view>{{ detail.loan_name }}</view>
                </view>
                <view class="flex items-center justify-between">
                    <view class="w-24 text-gray-400">产品类型</view>
                    <view>{{ detail.product_type }}</view>
                </view>
                <view class="flex items-center justify-between">
                    <view class="w-24 text-gray-400">真实姓名</view>
                    <view>{{ detail.realname }}</view>
                </view>
                <view class="flex items-center justify-between">
                    <view class="w-24 text-gray-400">手机号码</view>
                    <view>{{ detail.mobile }}</view>
                </view>
                <view class="flex items-center justify-between">
                    <view class="w-24 text-gray-400">贷款金额</view>
                    <view>{{ detail.loan_amount }}万</view>
                </view>
                <view class="flex items-center justify-between">
                    <view class="w-24 text-gray-400">贷款期限</view>
                    <view>{{ detail.loan_term }}年</view>
                </view>
                <view class="flex items-center justify-between">
                    <view class="w-24 text-gray-400">所在区域</view>
                    <view>{{ detail.area }}</view>
                </view>
                <view class="flex items-center justify-between">
                    <view class="w-24 text-gray-400">贷款用途</view>
                    <view>{{ setting.dict_purpose?.find(item => item.value == detail.purpose)?.label }}</view>
                </view>
            </view>
			
			<view class="panel items-center" v-if="detail.salesman_name">
			    <view class="!mb-3 text-blue-300 font-bold">业务员</view>
				<view class="flex">
					<u-avatar :src="$imgBase + detail.sales_avatar" shape="square" size="60"></u-avatar>
					<view class="flex-1 mx-3">
						<view class="font-bold">{{ detail.salesman_name }}</view>
						<view class="flex">
							<u-tag text="实名认证" plain size="mini" type="success"></u-tag>
						</view>
					</view>
				</view>
			</view>
			
			<view class="panel" v-if="isShowAny()">
				<view class="!mb-3 text-blue-300 font-bold">审核信息</view>
				<view class="flex items-center justify-between">
				    <view class="w-24 text-gray-400">放贷银行</view>
				    <view>{{ detail.lending_bank }}</view>
				</view>
				<view class="flex items-center justify-between">
				    <view class="w-24 text-gray-400">批准金额</view>
				    <view class="text-blue-600">{{ detail.approved_amount }}万元</view>
				</view>
				
				<view class="flex items-center justify-between">
				    <view class="w-24 text-gray-400">手续费</view>
				    <view class="text-red-500">{{ detail.fee }}元</view>
				</view>
			</view>
			
            <view v-if="work" class="panel !rounded-lg work">
                <view class="!mb-3 text-blue-300 font-bold">薪资</view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">薪资</view>
                    <view>{{ setting.dict_monthly_income?.find(item => item.value == work.monthly_income)?.label }}
                    </view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">工作单位</view>
                    <view>{{ work.company_name }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">单位性质</view>
                    <view>{{ setting.dict_company_type?.find(item => item.value == work.company_type)?.label }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">征信状况</view>
                    <view>{{ 征信状况[work.credit_status as keyof typeof 征信状况] }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">是否银行代发工资</view>
                    <view>{{ getHas(work.is_bank_pay) }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">是否缴纳公积金</view>
                    <view>{{ getHas(work.has_hff) }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">是否缴纳个税</view>
                    <view>{{ getHas(work.has_iit) }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">在本市是否有房产</view>
                    <view>{{ getHas(work.has_local_house) }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">是否抵押</view>
                    <view>{{ getHas(work.mortgaged) }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">房货月供</view>
                    <view>{{ work.monthly_payment }}</view>
                </view>
            </view>
            <view class="panel !rounded-lg house" v-if="house">
                <view class="!mb-3 text-blue-300 font-bold">抵押房产</view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">房屋地址</view>
                    <view>{{ house.area }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">房屋面积</view>
                    <view>{{ house.floor_area }}m²</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">房屋价值</view>
                    <view>{{ house.house_value }}万</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">房屋月供</view>
                    <view>{{ house.monthly_payment }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">是否抵押</view>
                    <view>{{ getHas(house.mortgaged) }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">抵押银行</view>
                    <view>{{ house.mortgage_lender }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">房屋属性</view>
                    <view>{{ 房屋属性[house.property_type as keyof typeof 房屋属性] }}</view>
                </view>
                <view class="grid grid-cols-2 items-center">
                    <view class="mr-3">房屋用途</view>
                    <view>{{ 房屋用途[house.property_usage as keyof typeof 房屋用途] }}</view>
                </view>
            </view>
        </view>
        <view class="bg-white p-3 border-gray-200 border-t" v-if="isWait() && is_ywy == 1">
            <orderSubmit :apply_status="detail.apply_status" :is_ysf="0" :id="loan_id" @update="back" />
        </view>
        <view class="bg-white p-3 border-gray-200 border-t" v-if="detail.apply_status == 'wait_pay' && is_ywy == 0">
            <pay :is_ysf="0" :loan_apply_id="loan_id" @update="back" />
        </view>
    </l-page>
</template>
<script setup lang="ts">
import Order from "@/stores/order";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import Setting from "@/stores/settings"
import Loan from "@/stores/loan"
import orderSubmit from "./components/submit.vue"
import Pay from "./components/pay.vue"
const order = Order(), detail = ref<any>({}), work = ref<any>(), house = ref<any>(), setting = Setting(), loan_id = ref(), is_ywy = ref(0);
const { 征信状况, 房屋用途, 房屋属性, } = Loan()
const getHas = (num: number) => {
    if (num == 1) {
        return '是'
    } else if (num === 0) {
        return '否'
    } else {
        return ''
    }
}
const getDetail = () => {
    let ajax = is_ywy.value == 1 ? order.apply_wait_detail : order.apply_history_detail;
    ajax(loan_id.value).then((res: any) => {
        detail.value = res
        work.value = res.work
        house.value = res.house
    })
}
const isShowAny = () => {

    return detail.value.apply_status == 'wait_pay' || detail.value.apply_status == 'complete';
}
const isWait = () => {
    let status = detail.value.apply_status;
    return status == 'wait_sub' || status == 'wait_td' || status == 'wait_sign';
}
const back = () => {
    uni.navigateBack()
}
onLoad((option: any) => {
    loan_id.value = option.loan_id
    is_ywy.value = option.is_ywy
    getDetail()
})
</script>
<style scoped lang="scss">
.data>view,
.house>view,
.work>view {
    @apply my-2;
}
</style>